
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./../lib/jquery.js"></script>
    <style>
        *{padding: 0; margin: 0}
        .box{
            position:fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            display: none;
        }
        .box1{
            width: 500px;
            height: 500px;
            position: fixed;left: 50%; top: 25%;
            margin-left: -250px;
            border: 1px solid #000000;
            background: red
        }
    </style>
    <script>
 
    </script>
</head>
<body>
<a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a>
    <div class="box"style="z-index:999">
        <div class="box1"></div>
    </div>

</body>
</html>
 <script>
// $(function() {
// 　　$(".box1").click(function(event) {
// 　　　　return false;
// 　　});
// });
    jQuery(document).ready(function () {
        //阻止盒子冒泡
        $(function () {
            $(".box1").click(function (event) {
                event.stopPropagation();
            });
        });
        //点击父盒子关闭div
        $(function () {
            $(".box1").parent().click(function () {
                // $(".box").css('display', 'none');
                $('.box').hide();
            })
        })
    })
 
 </script>